<template style="height: 100%">
    <div style="height: 100%">
        <el-container style="height: 100%">
          <el-aside style="width: 200px">
            <Menu></Menu>
          </el-aside>
          <el-main style="height:100%">
          <h2>权限管理 <span style="color: revert;font-size:x-small">(仅管理员操作)</span></h2>
            <el-table
            :data="power_list_data"
              stripe
              border
              style="text-align: center;min-width: 100%;min-height: 90%;overflow-y: auto;float: left">
              <el-table-column
              prop="id"
              label="ID"
              width="100"
              >
              </el-table-column>
              <el-table-column
              prop="power_name"
              label="权限"
              width="200"
           >

              </el-table-column>
              <el-table-column
              prop="power_path"
              label="路由"
              width="350"
              style="text-align: center">
              </el-table-column>
              <el-table-column
                  width="500px"
              >
                <template  slot="header">
                  <el-button @click="add_power" type="primary" size="mini" style="width: 80px;height: 30px;margin-left: 200px">新增</el-button>
                </template>
                <template slot-scope="scope">
                            <el-button size="mini" type="primary"  @click="open_power(scope.$index)">编辑</el-button>
                            <el-button size="mini" type="danger"  @click="delete_power(scope.row.id)">删除</el-button>
                        </template>
              </el-table-column>
            </el-table>
            <el-input
                    type="textarea"
                    :rows="50"
                    style="position: fixed;right: 30px;top: 100px;max-width: 25%;box-shadow: 4px 4px 30px gray"
                    v-model="all_paths"
            ></el-input>
          </el-main>
        </el-container>
      <el-dialog title="编辑权限" :visible.sync="dialogFormVisible">
            <el-form :model="power">
                <el-form-item label="权限id" label-width="80px">
                    <el-input disabled="" v-model="power.id"></el-input>
                </el-form-item>

                <el-form-item label="权限名称" label-width="80px">
                    <el-input v-model="power.power_name"></el-input>
                </el-form-item>

                <el-form-item label="管控path" label-width="80px">
                    <el-input v-model="power.power_path"></el-input>
                </el-form-item>

                <el-form-item label="人员" power-width="80px">

                    <el-select v-model="power.users" multiple placeholder="请选择" style="width: 89%">
                      <el-option
                      v-for="i in all_users"
                      :key="i.id"
                      :label="i.username"
                      :value="i.username">

                      </el-option>
<!--                        <el-option-->
<!--                            v-for="i in all_users"-->
<!--                            :key="i.id"-->
<!--                            :label="i.id+'-'+i.username+'-'+i.title"-->
<!--                            :value="i.id+'-'+i.username+'-'+i.title"-->
<!--                        ></el-option>-->
                    </el-select>

                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save_power">保 存</el-button>
              </div>
        </el-dialog>
    </div>
</template>

<script>
    import Menu from '../components/Menu'
    import axios from 'axios'
    export default {
        name: "power_ll",
        data(){
          return{
            dialogFormVisible:false,
             power_list_data:[{'id':1}],
              power:{
                 id:'',
                  power_name:'',
                  power_path:'',
                  users:'',
              },
            all_users:[],
            all_paths:'',
            }
        },
        methods:{
          add_power(){
            axios.post('http://localhost:8000/add_power/',this.power).then(res=>{
              this.power_list_data=res.data.power_list_data;
              this.$message({
                message:'新增成功',
                type:'success',

              })
            })
          },
        open_power(index){
            this.power=this.power_list_data[index];
            this.dialogFormVisible=true;
        },
          save_power(){
            axios.post('http://localhost:8000/save_power/',this.power).then(res=>{
              this.power_list_data=res.data.power_list_data;
              this.dialogFormVisible=false;
              this.$message({
                message:'保存成功',
                type:'success',
              })

            })
          },
          delete_power(id){
            axios.get('http://localhost:8000/delete_power/',{params:{
              id:id
              }}).then(res=>{
                     this.power_list_data = res.data.power_list_data;
                     this.$message({
                       message:'删除成功',
                       type:'error',
                     })
            })
          }
        },
        mounted(){
            axios.get('http://localhost:8000/get_power_list/').then(
                res=>{
                    this.power_list_data = res.data.power_list_data;
                    this.all_users = res.data.all_users;
                    this.all_paths = res.data.all_paths;
                }
            )
        },
        components:{
            Menu
        }
    }
</script>

<style scoped>
 /*.el-aside {*/
 /*   background-color: #D3DCE6;*/
 /*   color: #333;*/
 /*   text-align: center;*/

 /* }*/
 /* .el-main {*/
 /*   background-color: white;*/
 /*   color: #333;*/
 /* }*/
</style>